<template>
    <div class="crowd_create_page">
        <head-top signin-up='home'>
        </head-top>

        <section class="create_container">
            <h2>Start a campaign</h2>
            <h3>Raise funds for creative, entrepreneurial, or other passion projects.</h3>
            <p class="tip price-area">
                How much money would you like to raise?
            </p>
            <p>
            <div class="single-row">
                <div class="price-input">

                    <el-input v-model="price" placeholder="500">
                        <template slot="prepend">
                            <span class="i-currency-label ng-binding">{{priceTag}}</span>
                        </template>
                    </el-input>
                </div>
                <div class="option-select">
                    <el-select v-model="priceType" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <p class="sub-tip">
                Minimum {{priceTag}}500.
            </p>

            <!--<p class="tip" style="margin-top: 66px;">
                What is the title of your campaign?
            </p>
            <p>
            <div class="single-row">
                <div class="title-input">

                    <el-input v-model="campaignTitle" placeholder="My Campaign Title">
                    </el-input>
                </div>
            </div>
            <p class="sub-tip">
                50 characters maximum.
            </p>-->

        </section>
        <section style="margin-left: 26px;">
            <el-button type="danger" class="submit-button" @click="saveBasicCampaign">create my campaign</el-button>
        </section>
    </div>
</template>

<script>
    import headTop from 'src/components/header/head'
    import alertTip from 'src/components/common/alertTip'

    export default {
        data() {
            return {
                system: null,
                showAlert: false,
                alertText: null,
                options: [{
                    value: 'USD',
                    label: 'USD'
                }, {
                    value: 'EUR',
                    label: 'EUR'
                }, {
                    value: 'GBP',
                    label: 'GBP'
                }, {
                    value: 'CAD',
                    label: 'CAD'
                }, {
                    value: 'AUD',
                    label: 'AUD'
                }],
                priceType: 'USD',
                price: 500,
                campaignTitle: ''
            }
        },
        computed: {
            priceTag: function () {
                var priceTag = '$'
                switch (this.priceType) {
                    case "USD":
                        priceTag = '$'
                        break
                    case "EUR":
                        priceTag = '€'
                        break
                    case "GBP":
                        priceTag = '$'
                        break
                    case "CAD":
                        priceTag = '€'
                        break
                    case "AUD":
                        priceTag = '€'
                        break
                    default:
                        break
                }
                return priceTag
            }
        },
        created() {
            //判断系统
            let u = navigator.userAgent;
            let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
            let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            if (isAndroid) {
                this.system = 'Android';
            } else if (isIOS) {
                this.system = 'IOS';
            } else {
                this.system = 'pc';
            }
        },
        mixins: [],
        components: {
            headTop,
            alertTip,
        },
        props: [],
        methods: {
            /*download() {
                //如果是ios用户则提示，否则直接下载
                if (this.system == 'IOS') {
                    this.showAlert = true;
                    this.alertText = 'IOS用户请前往AppStore下载'
                } else {
                    try {
                        let elemIF = document.createElement("iframe");
                        elemIF.src = 'http://cangdu.org/files/elm.apk';
                        elemIF.style.display = "none";
                        document.body.appendChild(elemIF);
                    } catch (e) {
                        alert('下载失败')
                    }
                }
            },*/
            // 保存活动基本信息
            saveBasicCampaign() {
                var that = this
                this.$store.dispatch('SAVE_CAMPAIGN_INFO', {
                    'mutationName': 'SET_PRICE',
                    'value': this.price
                })
                this.$store.dispatch('SAVE_CAMPAIGN_INFO', {
                    'mutationName': 'SET_PRICE_TYPE',
                    'value': this.priceType
                })
                /*this.$store.dispatch('SAVE_CAMPAIGN_INFO', {
                    'mutationName': 'SET_TITLE',
                    'value': this.campaignTitle
                })*/
                that.$router.push("/crowd/step1")
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                // 通过 `vm` 访问组件实例
            })
        }

    }
</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';

    .crowd_create_page {
        h2 {
            ont-family: "Benton Sans Medium";
            font-size: 40px;
            line-height: 26px
        }
        .create_container {
            margin-top: 66px;
            margin-left: 26px;
            .tip {
                font-size: 16px;
                color: #6a6a6a;
                margin: 25px 0 10px;
            }
            .price-area {
                margin-top: 66px;
            }
            .sub-tip {
                font-size: 15px;
                color: #6a6a6a;
                margin-top: 6px;
            }
            .single-row {
                display: flex;
                .price-input {
                    width: 160px;
                }
                .option-select {
                    width: 116px;
                    margin-left: 6px;
                }
                .title-input {
                    width: 166px;
                }
            }
        }
        .submit-button {
            background-color: #E51075;
            border: 2px solid #E51075;
            font-weight: bold;
            font-size: 16px;
            line-height: 16px;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 15px 18px;
            min-height: 50px;
            margin-top: 66px;
        }
    }
</style>
